<template>
  <div class="projects-page"> 
    <canvas id="projectBackgroundCanvas"></canvas>
    <h1 class="page-title">项目展示</h1>
    <div class="carousel-container">
      <div class="image-container">
        <transition name="slide-right" mode="out-in">
          <div v-if="leftProject" key="left-{{ currentIndex }}" class="image-side image-left">
            <div class="project-item" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
              <img 
                :src="leftProject.image" 
                :alt="leftProject.title" 
                class="project-image"
              />
              <div class="project-info-overlay">
                <h2 class="project-title">{{ leftProject.title }}</h2>
                <p class="project-description">{{ leftProject.description }}</p>
                <a v-if="leftProject.url" :href="leftProject.url" target="_blank" class="goto-button">前往</a>
                <a v-else :href="`/ProjectDetail/${leftProject.id}`" class="goto-button">前往</a>
              </div>
            </div>
          </div>
        </transition>
        
        <transition name="fade" mode="out-in">
          <div key="center-{{ currentIndex }}" class="image-center">
            <div class="project-item" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
              <img 
                :src="currentProject.image" 
                :alt="currentProject.title" 
                class="project-image"
              />
              <div class="project-info-overlay">
                <h2 class="project-title">{{ currentProject.title }}</h2>
                <p class="project-description">{{ currentProject.description }}</p>
                <a v-if="currentProject.url" :href="currentProject.url" target="_blank" class="goto-button">前往</a>
                <a v-else :href="`/ProjectDetail/${currentProject.id}`" class="goto-button">前往</a>
              </div>
            </div>
          </div>
        </transition>
        
        <transition name="slide-left" mode="out-in">
          <div v-if="rightProject" key="right-{{ currentIndex }}" class="image-side image-right">
            <div class="project-item" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
              <img 
                :src="rightProject.image" 
                :alt="rightProject.title" 
                class="project-image"
              />
              <div class="project-info-overlay">
                <h2 class="project-title">{{ rightProject.title }}</h2>
                <p class="project-description">{{ rightProject.description }}</p>
                <a v-if="rightProject.url" :href="rightProject.url" target="_blank" class="goto-button">前往</a>
                <a v-else :href="`/ProjectDetail/${rightProject.id}`" class="goto-button">前往</a>
              </div>
            </div>
          </div>
        </transition>
      </div>
      
      <div class="navigation-buttons">
        <button @click="previousProject" class="nav-button nav-left" :disabled="!hasMultipleProjects">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </button>
        <button @click="nextProject" class="nav-button nav-right" :disabled="!hasMultipleProjects">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </button>
      </div>
      
      <div class="indicator-dots">
        <span 
          v-for="(project, index) in projects" 
          :key="index"
          :class="['dot', { active: index === currentIndex }]"
          @click="goToProject(index)"
        ></span>
      </div>
    </div> 
  </div> 
</template>

<script>
// 导入图片资源
import projectImage1 from '/医疗保险欺诈识别检测.png';
import projectImage2 from '/可视化大屏项目.jpg';
import projectImage3 from '/做菜帮帮团.png';
import projectImage4 from '/钉钉微应用.png';
import projectGif1 from '/pointCloud.gif';

import { initProjectBackground, enableProjectBackground, disableProjectBackground } from '@/utils/projectBackground.js';

export default {
  name: 'ProjectPage',
  data() {
    return {
      currentIndex: 0,
      projects: [
        {
          id: 1,
          title: '医疗保险欺诈识别',
          description: '基于机器学习的医疗保险欺诈检测系统',
          image: projectImage1,
          url: ''
        },
        {
          id: 2,
          title: '可视化大屏项目',
          description: '用于展示公司合作企业数据的可视化大屏项目',
          image: projectImage2,
          url: ''
        },
        {
          id: 3,
          title: '做菜帮帮团',
          description: '一个基于微信小程序的做菜教程平台',
          image: projectImage3,
          url: ''
        },
        {
          id: 4,
          title: '点云数据可视化',
          description: '基于硬件平台数据绘制大量点云数据',
          image: projectGif1,
          url: ''
        },
        {
          id: 5,
          title: '钉钉微应用',
          description: '基于钉钉应用开发的移动端程序',
          image: projectImage4,
          url: ''
        }
      ]
    };
  },
  computed: {
    currentProject() {
      return this.projects[this.currentIndex];
    },
    
    leftProject() {
      // 当只有一个项目时不显示左侧图片
      if (this.projects.length <= 1) return null;
      const prevIndex = (this.currentIndex - 1 + this.projects.length) % this.projects.length;
      return this.projects[prevIndex];
    },
    
    rightProject() {
      // 当只有一个项目时不显示右侧图片
      if (this.projects.length <= 1) return null;
      const nextIndex = (this.currentIndex + 1) % this.projects.length;
      return this.projects[nextIndex];
    },
    
    hasMultipleProjects() {
      return this.projects.length > 1;
    }
  },
  methods: {
    // 添加启用背景的方法
    enableBackground() {
      enableProjectBackground();
    },
    
    // 添加禁用背景的方法
    disableBackground() {
      disableProjectBackground();
    },
    
    nextProject() {
      this.currentIndex = (this.currentIndex + 1) % this.projects.length;
    },
    
    previousProject() {
      this.currentIndex = (this.currentIndex - 1 + this.projects.length) % this.projects.length;
    },
    
    goToProject(index) {
      this.currentIndex = index;
    },

    handleMouseEnter(event) {
      const target = event.currentTarget;
      
      // 定义处理鼠标移动的函数
      const handleMouseMove = (e) => {
        const rect = target.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        
        const deltaX = (x - centerX) / centerX;
        const deltaY = (y - centerY) / centerY;
        
        // 根据鼠标位置计算旋转角度
        const rotateX = deltaY * 5; // 鼠标在上方时向下旋转，下方时向上旋转
        const rotateY = deltaX * 5;  // 鼠标在右方时向右旋转，左方时向左旋转
        
        target.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
      };
      
      // 将处理函数存储在元素上，以便在mouseleave中移除
      target._handleMouseMove = handleMouseMove;
      
      // 添加鼠标移动监听器
      target.addEventListener('mousemove', handleMouseMove);
      
      // 立即调用一次处理函数
      handleMouseMove(event);
    },

    handleMouseLeave(event) {
      const target = event.currentTarget;
      
      // 移除鼠标移动监听器
      if (target._handleMouseMove) {
        target.removeEventListener('mousemove', target._handleMouseMove);
        delete target._handleMouseMove;
      }
      
      target.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
    }
  },
  mounted() {
    // 初始化项目背景
    initProjectBackground();
    // 启用项目背景渲染和鼠标监听
    this.enableBackground();
  },
  beforeUnmount() {
    // 禁用项目背景渲染和鼠标监听
    this.disableBackground();
    
    // 额外确保背景被清理
    const canvas = document.getElementById('projectBackgroundCanvas');
    if (canvas) {
      const ctx = canvas.getContext('2d');
      if (ctx) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
    }
  }
};
</script>

<style>
/* 引入公共CSS文件 */
@import url('@/assets/common-carousel.css');

/* 页面特定样式 */
.projects-page {
  min-height: 100vh;
  color: #fff;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

/* 图片元素的基础样式 */
.image-center,
.image-side {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
  transition: transform 0.125s ease-out;
}

.image-center {
  width: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  min-width: 250px;
  cursor: pointer;
  /* 添加以下样式确保容器高度固定 */
  height: 100%;
  overflow: hidden;
}


.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50vh; /* 固定容器高度 */
  min-height: 300px;
  max-height: 500px;
  margin-bottom: 50px;
  width: 100%;
  flex-wrap: wrap;
}

/* 当只有一个项目时，居中显示 */
.image-container:has(> div:nth-child(2):only-child) .image-center {
  width: 70%;
}

/* 中等屏幕调整 */
@media (max-width: 992px) {
  .image-container {
    height: 45vh;
    min-height: 280px;
  }
  
  .image-center,
  .image-side {
    width: 80%;
  }
}

/* 小屏幕调整 */
@media (max-width: 768px) {
  .image-container {
    height: 40vh;
    min-height: 250px;
  }
  
  .image-center,
  .image-side {
    width: 90%;
  }
}

/* 超小屏幕调整 */
@media (max-width: 576px) {
  .image-container {
    height: 35vh;
    min-height: 220px;
  }
  
  .image-center,
  .image-side {
    width: 100%;
    min-width: 180px;
  }
}

.project-info {
  margin-top: 20px;
  width: 100%;
}

.project-info .project-title {
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  margin-bottom: 10px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.project-info .project-description {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  max-width: 90%;
  margin: 0 auto;
}

.project-item {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.project-info-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.project-item:hover .project-info-overlay {
  transform: translateY(0);
  opacity: 1;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 确保GIF动画正常播放 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 添加以下样式确保图片不会撑开容器 */
  display: block;
  flex-shrink: 0;
}

/* 添加的"前往"按钮样式 */
.goto-button {
  margin-top: 15px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
}

.goto-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(67, 97, 238, 0.6);
}

.goto-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(67, 97, 238, 0.3);
}

@media (max-width: 768px) {
  .project-info .project-title {
    font-size: 1.5rem;
  }
  
  .project-info .project-description {
    font-size: 1rem;
  }
  
  .goto-button {
    padding: 6px 16px;
    font-size: 0.9rem;
  }
}

/* 背景画布样式 */
.projects-page {
  position: relative;
}

#projectBackgroundCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
</style>